<template>
  <div class="content">
    <div class="group" v-if="tab">
      <div
        :class="btnActived == index + 1 ? 'active' : ''"
        @click="_tabClick(item, index + 1)"
        v-for="(item, index) in tabList"
        :key="index"
      >
        {{ item }}
      </div>
    </div>
    <div class="rank-content">
      <div v-for="(item, index) in chartList" :key="index" :id="item.id" :style="{flex: 1, height: '100%',}"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
    },
    chartTitle: {
      type: Object,
    },
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
    color: {
      type: Array,
      default: () => {
        return ['#5986f1', '#00d1dc', '#ffd349', '#ff8e3f', '#ff696a', '#ff6cbf', '#bf64fc']
      },
    },
    legend: {
      type: Boolean,
      default: false,
    },
    tab: {
      type: Boolean,
      default: false,
    },
    tabList: {
      type: Array,
      default: () => {
        return ['7天', '一个月']
      },
    },
    legendPositon: {
      type: [String, Number],
      default: 'center',
    },
    centerSuffix: {
      type: String,
    },
  },
  data() {
    return {
      id: '',
      btnActived: 1,
      show: true,
      chartList: []
    }
  },
  created() {
    this.chartList = []
    for (let i in this.data) {
      let item = {
        barChart: null, // chart 对象实例
        id: 'rankVerBar-' + Math.random(), // 为了标示 id 不同
        option: {},
      }
      this.chartList.push(item)
    }
    // this.id = 'rankVerBar-' + Math.random()
  },
  mounted() {
    this.$nextTick(() => {
      this._initBar()
    })
  },
  updated() {
    this.$nextTick(() => {
      this._initBar()
    })
  },
  methods: {
    _tabClick(name, index) {
      this.btnActived = index
      this.$emit('tab-click', name)
    },
    _initBar() {
      let itemFontSize = document.documentElement.clientHeight * 0.020
      for (let i in this.data) {
        let a = this.data[i].ratio?this.data[i].ratio.replace('%', ''): 0
        let b = this.data[i].product?this.data[i].product: ''
        let c = 100 - a
        let color = this.color[i]
        let option = {
          //中间加文字
          title: {
            text: a + this.centerSuffix,
            subtext: b,
            subtextStyle: {
              fontSize: itemFontSize,
              color: '#6c6b6b',
            },
            x: 'center',
            y: '44%',
            textStyle: {
              fontWeight: 'normal',
              lineHeight: 6,
              color: '#6c6b6b',
              fontSize: itemFontSize,
            },
          },
          color: ['rgba(238, 241, 243, 1)'],
          series: [
            {
              name: 'pie 1',
              type: 'pie',
              clockWise: true,
              radius: ['90%', '70%'],
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                },
              },
              hoverAnimation: false,
              data: [
                {
                  value: a,
                  name: '01',
                  itemStyle: {
                    normal: {
                      color: color,
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                  },
                },
                {
                  name: '02',
                  value: c,
                },
              ],
            },
          ],
        }
        this.chartList[i].option = option
      }
      this.$nextTick(() => {
        for (let i = 0; i < this.chartList.length; i++) {
          let documentChart = document.getElementById(this.chartList[i].id)
          if(documentChart) {
            this.chartList[i].barChart = this.$echarts.init(documentChart)
            window.onresize = this.chartList[i].barChart.resize
            this.chartList[i].barChart.setOption(this.chartList[i].option) //设置option
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-flow: column;

  .group {
    display: flex;
    padding: 10px;

    div {
      width: 9.722vh;
      height: 2.777vh;
      display: flex;
      justify-content: center;
      align-items: center;
      // background-image: url(../../../assets/daping/components/defaultBtn.png);
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
      font-size: 1.48vh;
      color: #fff;
      cursor: pointer;
      margin-right: 20px;
    }

    .active {
      // background-image: url(../../../assets/daping/components/activeBtn.png);
      color: #000;
      font-weight: bold;
    }
  }

  .rank-content {
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    // & > * {
    //   flex: 0 0 25%;
    //   height: 50%;
    // }
  }
}
</style>
